import type { MDXComponents } from "mdx/types";
import Image, { ImageProps } from "next/image";
import Code from "./components/Common/Code";

// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including inline styles,
// components from other libraries, and more.

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Allows customizing built-in components, e.g. to add styling.
    h1: ({ children }) => (
      <h1
        style={{
          paddingBottom: ".5rem",
          fontSize: "26px",
          margin: "16px 0",
          borderBottom: "1px solid #8a8a8a",
        }}
      >
        {children}
      </h1>
    ),
    h2: ({ children }) => (
      <h2
        style={{
          fontSize: "24px",
          margin: "1rem 0",
          paddingBottom: ".5rem",
          borderBottom: "1px solid #8a8a8a",
        }}
      >
        {children}
      </h2>
    ),
    h3: ({ children }) => <h3 style={{ fontSize: "20px" }}>{children}</h3>,
    h4: ({ children }) => <h4 style={{ fontSize: "16px" }}>{children}</h4>,
    // img: (props) => (
    //   <Image
    //     sizes="100vw"
    //     width={200}
    //     height={200}
    //     style={{ width: "100%", height: "auto" }}
    //     {...(props as ImageProps)}
    //   />
    // ),
    img: (props) => (
      <div className="flex items-center py-2">
        <img {...props} />
      </div>
      // <Image
      //   sizes="100vw"
      //   width={200}
      //   height={200}
      //   style={{ width: "100%", height: "auto" }}
      //   {...(props as ImageProps)}
      // />
    ),
    a: (props) => <a className="text-blue-500" {...props} />,
    p: ({ children }) => (
      <p style={{ lineHeight: "2rem", margin: ".8rem 0" }}>{children}</p>
    ),
    pre: ({ children }) => <Code code={children} />,
    ...components,
  };
}
